<template>
    <div class="register-container">
        <div class="register-card">
            <div class="register-header">
                <h1 class="register-title">用户注册</h1>
                <p class="register-subtitle">AI零代码应用生成平台</p>
            </div>

            <a-form :model="formState" name="register-form" class="register-form" @finish="handleSubmit">
                <a-form-item name="account" :rules="[
                    { required: true, message: '请输入用户名!' },
                    { min: 3, max: 20, message: '用户名长度必须在3-20个字符之间!' },
                ]">
                    <a-input v-model:value="formState.account" size="large" placeholder="用户名" />
                </a-form-item>
                <a-form-item name="password" :rules="[
                    { required: true, message: '请输入密码!' },
                    { min: 6, message: '密码长度不能少于6个字符!' },
                ]">
                    <a-input-password v-model:value="formState.password" size="large" placeholder="密码" />
                </a-form-item>

                <a-form-item name="checkPassword" :rules="[
                    { required: true, message: '请确认密码!' },
                    { validator: validateConfirmPassword },
                ]">
                    <a-input-password v-model:value="formState.checkPassword" size="large" placeholder="确认密码" />
                </a-form-item>

                <a-form-item name="agreement" :rules="[{ validator: validateAgreement }]">
                    <a-checkbox v-model:checked="formState.agreement">
                        我已阅读并同意<a class="agreement-link">《用户协议》</a>和<a class="agreement-link">《隐私政策》</a>
                    </a-checkbox>
                </a-form-item>

                <a-form-item>
                    <a-button type="primary" html-type="submit" size="large" class="register-button" :loading="loading"
                        block>
                        注册
                    </a-button>
                </a-form-item>

                <div class="login-link">
                    已有账号？
                    <router-link to="/user/login" class="link">立即登录</router-link>
                </div>
            </a-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { userRegister } from '@/api/userController'

// 定义组件名称
defineOptions({
    name: 'UserRegister',
})

const router = useRouter()
const loading = ref(false)

const formState = reactive<API.UserRegisterRequest>({
    account: '',
    password: '',
    checkPassword: '',
    agreement: false,
})

const validateConfirmPassword = async (_rule: unknown, value: string) => {
    if (value === '') {
        throw new Error('请确认密码!')
    } else if (value !== formState.password) {
        throw new Error('两次输入的密码不一致!')
    }
}

const validateAgreement = async (_rule: unknown, value: boolean) => {
    if (!value) {
        throw new Error('请阅读并同意用户协议和隐私政策!')
    }
}

const handleSubmit = async (values: FormState) => {
    loading.value = true
    try {
        console.log('注册表单数据:', values)
        // 调用注册 API
        const res = await userRegister(formState)
        if (res.code === 0) {
            message.success('注册成功！请登录')
        }
        // 注册成功后跳转到登录页
        router.push('/user/login')
    } catch {
        message.error('注册失败，请稍后重试')
    } finally {
        loading.value = false
    }
}
</script>

<style scoped>
.register-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.register-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

.register-header {
    text-align: center;
    margin-bottom: 32px;
}

.register-title {
    font-size: 28px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.register-subtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.register-form {
    width: 100%;
}

.agreement-link {
    color: #1890ff;
    text-decoration: none;
}

.agreement-link:hover {
    color: #40a9ff;
}

.register-button {
    height: 48px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
}

.login-link {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: #666;
}

.link {
    color: #1890ff;
    text-decoration: none;
    font-weight: 500;
}

.link:hover {
    color: #40a9ff;
}

:deep(.ant-input-affix-wrapper) {
    border-radius: 8px;
    height: 48px;
}

:deep(.ant-input) {
    font-size: 14px;
}

:deep(.ant-form-item) {
    margin-bottom: 20px;
}
</style>
